<template>
    <div class="homePage">
        <el-container>
            <!-- 头部 -->
            <el-header>
                <el-input
                    placeholder="请输入内容"
                    @keyup.native="keyup($event)"
                    @input="InputHandle"
                    v-model="searchInfo"
                    clearable
                    class="input-with-select"
                >
                    <el-button slot="append" icon="el-icon-search" @click="searchIt()"></el-button>
                </el-input>
                <ul class="ciTiao" v-show="wordArr.length != 0">
                    <li v-for="(item, index) in wordArr" :key="index" :class="listIndex == index ? 'choose' : ''" @click="tragetIt(item)">
                        {{ item }}
                    </li>
                </ul>
            </el-header>
            <!-- 版心 -->
            <el-main>
                <div class="banixn">
                    <MAIN></MAIN>
                </div>
                <aside class="rightAside">
                    <rightAside></rightAside>
                </aside>
            </el-main>
        </el-container>
        <!-- footer -->
        <footer>
            <div><a href="https://gitee.com/mao-menghui/my-blog.git">源码链接，正在持续更新中</a></div>
            <div>Copyright © 2022-2023 mh-better.top All Rights Reserved</div>
            <div>
                <a href="https://beian.miit.gov.cn/">豫ICP备xxxxxxxxxxxx号-1</a>
            </div>
        </footer>
    </div>
</template>
<script>
import rightAside from "@/components/rightAside.vue";
import MAIN from "@/components/main.vue";
export default {
    data() {
        return {
            searchInfo: "", //搜索内容
            timer: null,
            listIndex: -1, //设置初始索引，数组从0开始，因此初始成-1
            wordArr: [] //搜索词条
        };
    },
    components: {
        rightAside,
        MAIN
    },
    created() {
        // console.log(this);
    },
    methods: {
        // 监听输入框输入
        InputHandle() {
            let searchInfo = this.searchInfo;
            if (searchInfo.length == 0) {
                this.wordArr = [];
                return;
            }
            var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
            if (this.timer) this.timer = null;
            // 使用jsonp的方式获取返回的数据直接可用,-----VueResource插件解决跨域
            this.$http
                .jsonp(url, {
                    params: {
                        wd: searchInfo
                    },
                    jsonp: "cb"
                })
                .then(res => {
                    // console.log(res);
                    this.timer = true;
                    this.wordArr = res.data.s; //把百度服务器返回的数据传给arr数组
                });
            // axios请求返回的字符串形式数据不好获取并转换
            // this.$axios({
            //     method: "get",
            //     url: "/api/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            //     params: { wd: searchInfo}
            // }).then(res => {
            //     console.log(res);//window.baidu.sug({q:"",p:,s:[]});
            // });
        },
        // 点击搜索
        searchIt() {
            console.log("搜索");
            if (this.searchInfo) {
                window.open("https://www.baidu.com/s?wd=" + this.searchInfo);
            }
        },
        // 键盘事件
        keyup(event) {
            if (this.searchInfo && event.keyCode == 13) {
                console.log("enter");
                window.open("https://www.baidu.com/s?wd=" + this.searchInfo);
            } else if (event.keyCode == 40) {
                // 按的向下键
                console.log("下");
                this.listIndex++;
                if (this.listIndex > this.wordArr.length - 1) {
                    this.listIndex = 0;
                }
                this.searchInfo = this.wordArr[this.listIndex];
            } else if (event.keyCode == 38) {
                // 按的向上键
                console.log("上");
                this.listIndex--;
                if (this.listIndex < 0) {
                    this.listIndex = this.wordArr.length - 1;
                }
                this.searchInfo = this.wordArr[this.listIndex];
            }
        },
        // 点击后跳转页面
        tragetIt(item) {
            window.open("https://www.baidu.com/s?wd=" + item);
        }
    }
};
</script>

<style lang="less" scoped>
@import url("../assets/css/home.css");
</style>
